<template>
	<div id="dataBar">
		<div style="display: flex; justify-content: center">
			<Breadcrumb class="breadcrumb" :crumbs="crumbs" :color="'#a0b6cd'" :chooseColor="'#FFFFFF'"></Breadcrumb>
		</div>
		<div id="datasDiv">
			<div class="dataDiv">
				<div class="num">
					<span>{{formatNum(policyApplyFinishTotal)}}</span>
					<!-- <span class="unit">条</span> -->
				</div>
				<div class="title">兑现政策数</div>
			</div>
			<div class="dataDiv">
				<div class="num">
					<span>{{formatNum(policyApplyTotal)}}</span>
					<!-- <span class="unit">条</span> -->
				</div>
				<div class="title">正在申报数</div>
			</div>
			<div class="dataDiv">
				<div class="num">
					<span>{{formatNum(policyApplyCompanyTotal)}}</span>
					<!-- <span class="unit">个</span> -->
				</div>
				<div class="title">申报企业数</div>
			</div>
			<div class="dataDiv">
				<div class="num">
					<!-- <span>{{formatNum(policyRedemptionAmount/1000000)}}</span> -->
					<span>{{formatNum(policyRedemptionAmount/10000)}}</span>
					<span class="unit">万元</span>
				</div>
				<div class="title">已兑现金额</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Breadcrumb from '@/components/breadcrumb'
  import { getPolicydict } from "@/common/api/policy.js";

	export default {
		name: "dataBar",
		components: {Breadcrumb},
		data() {
			return {
				policyApplyFinishTotal: 0, //兑现政策数
				policyApplyTotal: 0, //正在申报数
				policyApplyCompanyTotal: 0, //申报企业数
				policyRedemptionAmount: 0 //已兑现金额
			}
		},
		props: {
			crumbs: {
				type: Array,
				default: []
			}
		},
		methods: {
			/**
			 * 格式化显示数字
			 */
			formatNum: function (num) {
				return parseFloat(num).toLocaleString()
			},
			/**
			 * 获取数据信息
			 */
			async getData() {
				let ns = this
				let data = {
					entrance: 2
				}
        let res = await getPolicydict(data)
        ns.policyApplyFinishTotal = res.data.policyApplyFinishTotal
        ns.policyApplyTotal = res.data.policyApplyTotal
        ns.policyApplyCompanyTotal = res.data.policyApplyCompanyTotal
        ns.policyRedemptionAmount = res.data.policyRedemptionAmount
			}
		},
		mounted() {
			let ns = this
			ns.getData()
		}
	}
</script>

<style scoped>
	#dataBar {
		height: 169px;
		width: 100%;
		background-image: url("~@/assets/image/dataBar/dataBarBg.png");
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;

	}

	#dataBar .breadcrumb {
		margin-top: 20px;
		margin-bottom: 30px;
		width: 1200px;
	}

	#dataBar #datasDiv {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#dataBar #datasDiv .dataDiv {
		width: 300px;
		color: #ffffff;
	}

	#dataBar #datasDiv .dataDiv .num {
		font-size: 25px;
		margin-bottom: 5px;
	}

	#dataBar #datasDiv .dataDiv .num .unit {
		font-size: 15px;
	}

	#dataBar #datasDiv .dataDiv .title {
		font-size: 15px;
	}
</style>
